<template>
  <div class="mian">
    <ul class="card_list">
      <!-- template -->
      <template v-for="(item,index) of allpatientinfo">
      <li class="card_item" :key="index" v-if="item.doctorName">
        <ul class="card_item_main">
          <li class="item_main item_main_top">
            <img src="../../assets/img/tested.png" alt="" class="tested" />
            <span class="bedNumber">{{item.bedNum}}床</span>
            <br />
            <span class="userInformation">{{item.doctorName}}</span>
            <span class="userInformation">{{item.sex == 0 ? "女" : "男"}}</span>
            <span class="userInformation">{{item.age}}岁</span>
          </li>
          <li class="item_main item_main_bottom">
            <span class="days_zy">{{item.inHospitalDayNum}}</span>
            <br />
            <span class="number_zy">{{item.hospitalNum}}</span>
            <div class="container_btn">
              <span class="btn_text">{{item.departmentName}}</span>
              <span class="btn_text">{{item.doctorName}}</span>
              <span class="btn_text">{{item.sugarType}}</span>
            </div>
            <span class="time_zy">时间:{{item.gluceExamtime}}</span>
            <br />
            <span class="time_cl">{{item.gluceValue}}</span>
            <br />
            <span class="measured">{{item.sugarNum}}mmol/L</span>
            <span class="icon_Collection">
              <i class="iconfont icon-shoucang1"></i>
            </span>
          </li>
        </ul>
      </li>
      <li class="empty_card_item" :key="index" v-else>
        <span class="bedNumber">12床</span>
        <img class="emptyBed" src="./image/emptyBed.png" />
        <el-button class="addbtn" type="text">添加</el-button>
      </li>
      </template>
    </ul>
  </div>
</template>

<script>
import "@/assets/fontIcon/collection/font_1858713_phswlcejg1/iconfont.css";

export default {
  data() {
    return {
      option_ks: [
        {
          label: "骨科",
          value: "1",
        },
        {
          label: "妇产科",
          value: "2",
        },
      ],
      option_ys: [
        {
          label: "李医生",
          value: "1",
        },
        {
          label: "王医生",
          value: "2",
        },
      ],
      option_lx: [
        {
          label: "1型",
          value: "1",
        },
        {
          label: "2型",
          value: "2",
        },
      ],
      value1: "", //科室val
      value2: "", //医生val
      value3: "", //类型val
      // 选择查看类型
      queryType: [
        {
          label: "全部人数",
          val: "222",
        },
        {
          label: "异常数据",
          val: "222",
        },
        {
          label: "待测人数",
          val: "222",
        },
        {
          label: "关注患者",
          val: "222",
        },
      ],
      radio: "全部人数",
      radio2: "",
      value4: "",
      switchVal: true, //卡片列表切换按钮绑定数值
    };
  },
  props: {
    allpatientinfo: {
      type: Array,
      required: true,
    },
  },
  methods: {
    switchTab() {
      console.log(this.switchVal);
    },
  },
};
</script>

<style lang="scss" scoped>
.mian {
  padding: 13px 0;
  .card_list {
    width: 100%;
    // background-color: #01a7f0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .card_item {
      width: 260px;
      height: 322px;
      background-color: #fff;
      list-style-type: none;
      margin-right: 16px;
      border-radius: 7px;
      margin-bottom: 20px;
      .card_item_main {
        padding: 0;
        .item_main {
          list-style-type: none;
          padding: 17px;
        }
        .item_main_top {
          height: 89px;
          position: relative;
          font-family: PingFang-SC-Bold, PingFang-SC;
          font-weight: bold;
          color: #333333;
          .tested {
            width: 60px;
            position: absolute;
            right: 0;
            top: 0;
          }
          .bedNumber {
            font-size: 22px;
            margin-right: 20px;
          }
          .userInformation {
            font-size: 15px;
            margin-right: 20px;
          }
          &:after {
            content: "";
            display: block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            width: 234px;
            border-bottom: 1px solid #eeeeee;
          }
        }
        .item_main_bottom {
          // background: red;
          .days_zy {
            &::before {
              content: "住院天数:";
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
            }
          }
          .number_zy {
            &::before {
              content: "住院号码:";
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
            }
          }
          .time_zy {
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
          .measured {
            font-size: 22px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #ff0101;
          }
          .container_btn {
            margin-bottom: 18px;
            .btn_text {
              height: 24px;
              background: #01a7f0;
              border-radius: 10px;
              color: #fff;
              padding: 2px 10px;
              font-size: 14px;
            }
          }
          .time_cl {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
          }
          .icon_Collection {
            // display: block;
            margin-left: 0.2rem;
            &::after {
              content: "关注";
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ff0101;
              margin-left: 6px;
            }
            .icon-shoucang1 {
              // background-color: #ff0101;
              // color: #ff0101;
              color: #999999;
            }
          }
        }
      }
    }
    .empty_card_item {
      width: 260px;
      height: 322px;
      padding: 17px;
      background-color: #fff;
      list-style-type: none;
      margin-right: 16px;
      border-radius: 7px;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-between;
      .bedNumber {
        align-self: flex-start;
      }
      .emptyBed {
        width: 161px;
      }
      .addbtn {
        font-size: 18px;
        font-weight: 400;
        &::after {
          content: "病床";
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
        &::before {
          content: "点击";
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
}
</style>